<template>
  <div>
    <v-tableTitle :btnConfig="btnConfig" :tableSelectData="tableSelectData" :title="$t('security.roleSetting')" @del="del" @newCreate="newCreate"></v-tableTitle>
    <GTable ref="table" :hasCheck="true" :hasEdit="true" api="/role/{page}" :otherHeight="0" :columnSource="baseColumns" @selection-change="data => tableSelectData = data" @setdialog="setdialog" />

    <el-dialog :title="dialogModule.title" :visible.sync="dialogModule.flag" center v-dialogDrag width="720px">
      <div v-tit="'角色信息'">
        <GForm ref="detail" :config="formConfig" :rules="formRules" v-model="form"></GForm>
      </div>
      <span slot="footer">
        <el-button type="primary" @click="handleConfirm">确定</el-button>
        <el-button @click="dialogModule.flag = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
import tableTitle from 'commons/TableTitle'

export default {
  name: 'permissionMgr',
  data() {
    return {
      tableSelectData: [],
      dialogModule: {
        loading: false,
        flag: false,
        title: '',
        data: null,
        type: ''
      },
      form: {
        name: null,
        description: null,
      },
    }
  },
  computed: {
    btnConfig() {
      return [
        {
          label: this.$t('common.create'),
          invalid: 'newCreate'
        },
        {
          label: this.$t('common.delete'),
          disabled: true,
          invalid: 'del'
        }
      ]
    },
    baseColumns(){
      return [{
          label: "角色名称",
          prop: "name",
          input: "input",
      },
      {
          label: "角色描述",
          prop: "description",
          input: "input",
      }]
    },
    formConfig(){
      return [
        {
          prop: 'name',
          type: 'input',
          label: '角色名称'
        },
        {
          prop: 'description',
          type: 'input',
          label: '角色描述'
        },
      ]
    },
    formRules() {
      return {
        name: [
          {
            required: true,
            message: "请输入角色名称",
            trigger: 'blur'
          }
        ],
        description: [
          {
            required: true,
            message: "请输入角色描述",
            trigger: 'blur'
          }
        ],
      }
    }
  },
  methods: {
    handleConfirm(){
      this.$refs.detail.validate().then(valid => {
        const params = this._.cloneDeep(this.form)
        let promise
        if (this.dialogModule.type == 'edit') {
          promise = this.$post(
            `/role/update`,
            params
          )
        } else {
          promise = this.$post(
            `/role/save`,
            params
          )
        }
        promise.then(res => {
          this.$message.success(res.returnMgr)
          this.getTableData()
          this.dialogModule.flag = false
        })
      })
    },
    newCreate() {
      this.dialogModule.title = '新增角色'
      this.dialogModule.type = 'add'
      this.dialogModule.data = null
      this.form = {
        name: null,
        description: null,
      }
      this.dialogModule.flag = true
    },
    //删除
    async del(data) {
      let arr = []
      data.forEach(item => {
        arr.push(item.id)
      })
      try {
        let res = await this.$api.post(`/role/delete`, arr)

        this.$message.success(res.returnMgr)
        let page = sessionStorage.getItem('page')
        this.getTableData(page, this.tableSearhData)
      } catch (e) {
        this.$message.error(e)
      }
    },
    async getTableData() {
      this.$refs.table.getTableData()
    },
    //设置弹框
    setdialog(data) {
      this.dialogModule.title = '修改角色'
      this.dialogModule.type = 'edit'
      this.form = data
      this.dialogModule.flag = true
    }
  },
  components: {
    'v-tableTitle': tableTitle,
  }
}
</script>

<style scoped>
#permissionMgr {
  width: 100%;
  height: 99%;
  padding-top: 6px;
}
</style>
